<template>
	<view class="deatil_bottom" :style="{'justify-content': (version.embedded ? 'center' : '')}">
		<button class="consult" open-type="contact" v-if="!version.embedded">
			<image :src="IMGLink + '/shopping/service.png'" mode="" style="width: 44rpx;height: 44rpx;">
			</image>
			<view class="text">
				客服
			</view>
		</button>
		<view style="position: relative;"
			v-if='!(topicId==3 && infos.user_type==1) && (infos.status == 0 || infos.status == 8)'>
			<view class="folt_redbag" v-if="infos.status == 8" @click="singReward">
				点击抽福袋
				<view class="float_pop">

				</view>
			</view>
			<view v-if="infos.group_method == 3" class="btn_box">
				<view class="btn" @click="singReward">
					<view class="first">单人拼购</view>
					<view>（即时开奖）</view>
				</view>
				<view class="btn" @click="manyReward">
					<view class="first">多人拼购</view>
					<view>（人满开奖）</view>
				</view>
			</view>
			<view v-if="infos.group_method == 2">
				<view class="one_btn redbtn">
					<view @click="manyReward">多人拼购（人满开奖）</view>
				</view>
			</view>
			<view v-if="infos.group_method == 1">
				<view class="one_btn redbtn" @click="singReward">
					单人拼购
				</view>
			</view>
		</view>
		<view class="btn_box" v-if='infos.status == 5'>
			<view class="btn single" @click="refunddePosit">
				<view>退保证金</view>
			</view>
			<view class="btn single" @click="singReward">
				<view>抽红包</view>
			</view>
		</view>
		<view class="one_btn grey"
			v-if='infos.status == 2 || infos.status == 10 || infos.status == 1 || infos.status == 3 || infos.status == 6'
			@click="noRequire">
			{{infos.status | btnStatus}}
		</view>
		<view class="kill" v-if='infos.status==7' @click="sceondKilled">
			参与秒杀
			<text>（保证金{{infos.pledge_money}}元）</text>
		</view>
		<view class="one_btn redbtn" v-if="topicId==3 && infos.user_type==1" @click="singReward">
			单人拼购
		</view>
		<view class="one_btn redbtn" v-if="infos.status==9" @click="manyReward">
			多人拼购(人满开奖)
		</view>
		<view class="one_btn redbtn" v-if='infos.status == 4' @click="noRequire">
			{{infos.status | btnStatus}}
		</view>
	</view>
</template>

<script>
	import {
		version
	} from "@/common/config.js"
	export default {
		props: ['info', 'topic_id'],
		data() {
			return {
				version: version,
				topicId: null,
				IMGLink: this.IMGLink,
				infos: {
					status: null,
					user_type: null
				}
			}
		},
		filters: {
			btnStatus(data) {
				switch (data) {
					case 1:
						return '秒杀未开始'
						break;
					case 2:
						return '商品已售罄'
						break;
					case 3:
						return '已报名'
						break;
					case 4:
						return '继续单人拼购'
						break;
					case 5:
						return '已交保证金'
						break;
					case 6:
						return '已结束'
						break;
					case 10:
						return '已下架'
						break;
					default:
						break;
				}
				return data;
			}
		},
		watch: {
			info: {
				handler(news) {
					this.infos = Object.assign({}, news)
					this.topicId = this.topic_id;
				},
				deep: true
			}
		},
		methods: {
			consult() {
				this.$Toast.none('暂未开通');
			},
			singReward() {
				this.$emit('singReward');
			},
			manyReward() {
				this.$emit('manyReward');
			},
			noRequire() {
				switch (this.info.status) {
					case 7:
						this.$emit('manyReward');
						break;
					case 3:
						this.$Toast.none('已经报名啦')
						break;
					case 4:
						this.$emit('singReward')
						break;
					case 6:
						this.$Toast.none('已经结束啦，下次再来')
						break;
					case 10:
						this.$Toast.none('该商品已下架')
						break;
					default:
						break;
				}
			},
			sceondKilled() {
				this.$emit('sceondKilled');
			},
			refunddePosit() {
				this.$emit('refunddePosit');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.deatil_bottom {
		width: 90%;
		height: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.consult {
			margin: 0;
			padding: 0;
			background-color: white;
			border: none;
			line-height: 1;
			padding-left: 30rpx;

			.text {
				font-size: 28rpx;
				line-height: 30rpx;
				color: rgba(89, 89, 89, 1);
			}
		}

		.consult:after {
			border: none;
		}

		.btn_box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 540rpx;
			position: relative;

			.btn {
				width: 246rpx;
				height: 74rpx;
				font-size: 20rpx;
				line-height: 20rpx;
				background: linear-gradient(90deg, #F8A733 0%, #F9BA37 100%);
				text-align: center;
				border-radius: 22px;
				color: #fff;

				.first {
					font-size: 28rpx;
					line-height: 46rpx;
				}

				&:last-child {
					background: linear-gradient(90deg, #FD4048 0%, #FC4655 100%);
				}

			}

			.single {
				font-size: 28rpx;
				line-height: 74rpx;
			}

		}

		.one_btn {
			width: 532rpx;
			height: 74rpx;
			line-height: 74rpx;
			color: #fff;
			border-radius: 22px;
			font-size: 28rpx;
			text-align: center;
		}

		.grey {
			background: rgba(130, 130, 130, 0.8);
		}

		.red {
			background: rgba(253, 64, 72, 0.54);
		}

		.redbtn {
			background: #FD4048;
		}

		.kill {
			width: 532rpx;
			height: 74rpx;
			text-align: center;
			line-height: 74rpx;
			background: linear-gradient(90deg, #F54642 0%, #FC4655 100%);
			color: #fff;
			border-radius: 22px;
			font-size: 32rpx;

			text {
				font-size: 24rpx;
			}
		}

		.folt_redbag {
			width: 180rpx;
			height: 50rpx;
			background: rgba(250, 101, 61, 0.14);
			position: absolute;
			top: -60rpx;
			left: 46rpx;
			font-size: 20rpx;
			line-height: 50rpx;
			text-align: center;
			color: rgba(245, 70, 66, 1);
			border-radius: 20px;

			.float_pop {
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 15rpx;
				border-color: rgba(250, 101, 61, 0.14) transparent transparent transparent;
				position: absolute;
				top: 50rpx;
				left: 80rpx;
			}
		}
	}
</style>
